<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:template match="/">
        <html>
            <head>
                <link href="/css/bootstrap.css" rel="stylesheet" media="screen"/>
                <link href="/css/docs.css" rel="stylesheet" media="screen"/>
                <link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen"/>
                <meta charset="UTF-8"/>
                <script language="javascript" type="text/javascript" src="https://www.google.com/jsapi"><![CDATA[ <!-- Some Comment --> ]]></script>
                <title>Распределение звонков по времени</title>
                <style>
                    .chart {
                        width: 100%;
                        height: 200px;
                        margin-top: 50px;
                    }
                </style>
            </head>
            <body>
                <div style="margin-top: 20px">
                    <div class="container">
                        <div class="row">
                            <div class="span3 bs-docs-sidebar">
                                <ul class="nav nav-list affix bs-docs-sidenav">
                                    <li>
                                        <a href="/service/agents/and/queues">
                                            <!--<i class="icon-chevron-right"/>-->
                                            Агенты и очереди звонков
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/service/show/hunt/groups">
                                            <!--<i class="icon-chevron-right"/>-->
                                            Подгруппы
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a href="/service/show/call/hist">
                                            Распределение звонков
                                        </a>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a tabindex="-1" href="#">Статистика</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="/service/show/super/stats?units-count=12&amp;time-unit=hours">
                                                    12 часов
                                                </a>
                                            </li>
                                            <li>
                                                <a href="/service/show/super/stats?units-count=24&amp;time-unit=hours">
                                                    1 день
                                                </a>
                                            </li>
                                            <li>
                                                <a href="/service/show/super/stats?units-count=2&amp;time-unit=days">
                                                    2 дня
                                                </a>
                                            </li>
                                            <li>
                                                <a href="/service/show/super/stats?units-count=7&amp;time-unit=days">
                                                    1 неделя
                                                </a>
                                            </li>
                                            <li>
                                                <a href="/service/show/super/stats?units-count=30&amp;time-unit=days">
                                                    1 месяц
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="/service/log/out">
                                            <!--<i class="icon-chevron-right"/>-->
                                            Выход
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="span9">
                                <script type="text/javascript">
                                    google.load("visualization", "1", {packages:["corechart"]});
                                    google.setOnLoadCallback(drawChart);
                                    function drawChart() {
                                        var data = google.visualization.arrayToDataTable(
                                        <xsl:value-of select="/response/graph-data/text()"/>
                                        );

                                        var options = {
                                        title: '',
                                        hAxis: {title: 'Время',  titleTextStyle: {color: 'red'}},
                                        legend: {position: 'top'}
                                        };

                                        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                                        chart.draw(data, options);
                                        drawChart2();
                                    }

                                    function drawChart2() {
                                        var data2 = google.visualization.arrayToDataTable(
                                            <xsl:value-of select="/response/graph-data2/text()"/>
                                        );
                                        var chart2 = new google.visualization.ColumnChart(document.getElementById('col_chart'))
                                        var options2 = {
                                            title: '',
                                            hAxis: {
                                                title: 'Дата',
                                                titleTextStyle: {color: 'red'}
                                            },
                                            vAxis: {
                                                gridLines: {color: '#333', count: 4},
                                                maxValue: 101,
                                                viewWindowMode: 'explicit',
                                                viewWindow: {
                                                    max: 101,
                                                    min: 0
                                                }
                                                <!--format:'#,###%'-->
                                            },
                                            legend: {position: 'top'},
                                        };
                                        chart2.draw(data2, options2)
                                    }
                                </script>
                                <div class="page-header">
                                    <h1>Распределение звонков</h1>
                                </div>
                                <div class="chart">
                                    <div id="chart_div" style="width:100%"/>
                                </div>

                            </div>
                                <div class="chart">
                                    <div id="col_chart" style="width:100%"/>
                                </div>
                        </div>
                    </div>
                </div>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
